import { Project } from "@/data/resumeData";

interface TimelineItemProps {
  project: Project;
  isLast: boolean;
}

export default function TimelineItem({ project, isLast }: TimelineItemProps) {
  return (
    <div className="flex relative pb-12">
      {!isLast && (
        <div className="absolute top-8 left-5 h-full w-0.5 bg-gray-200"></div>
      )}
      <div className="absolute top-0 left-0 flex items-center justify-center w-10 h-10 rounded-full bg-[#2B3A67] text-white font-bold">
        {project.period.split(".")[0]}
      </div>
      <div className="ml-16">
        <div className="bg-white p-6 rounded-lg shadow-sm">
          <h3 className="text-xl font-bold text-[#2B3A67]">{project.name}</h3>
          <p className="text-gray-500 mb-2">{project.period}</p>
          
          <div className="flex flex-wrap gap-2 mb-4">
            {project.techStack.map((tech) => (
              <span key={tech} className="px-3 py-1 bg-gray-100 rounded-full text-sm">
                {tech}
              </span>
            ))}
          </div>
          
          <p className="mb-4">{project.responsibilities}</p>
          
          <div className="mb-4">
            {project.achievements.map((achievement) => (
              <div key={achievement.text} className="flex items-center mb-2">
                <span className="mr-2">{achievement.text}:</span>
                <span className={`font-bold ${achievement.value > 0 ? 'text-green-500' : 'text-red-500'}`}>
                  {achievement.value > 0 ? '+' : ''}{achievement.value}%
                </span>
              </div>
            ))}
          </div>
          
          <div className="border border-gray-200 rounded overflow-hidden">
            <img 
              src={project.screenshot} 
              alt={`${project.name}截图`} 
              className="w-full h-auto"
            />
          </div>
        </div>
      </div>
    </div>
  );
}